<template>
  <div class="form">
    <el-form label-position="top" label-width="80px" :model="menuForm">
      <el-row :gutter="10">
        <el-col :span="12"><div>
          <el-form-item label-position="left" label="名称">
            <el-input v-model="menuForm.name"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
          <el-form-item label="表名">
            <el-input v-model="menuForm.tableName"></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input v-model="menuForm.remark"></el-input>
      </el-form-item>
      <div style="text-align: left;">
        <el-form-item>
          <el-button type="primary" @click="onUpdate" size="small">保存</el-button>
          <el-button @click="onClose" size="small">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="数据库字段" name="tableField">
          <v-field-list :id.sync="id" ></v-field-list>
        </el-tab-pane>
        <el-tab-pane label="生成Java代码" name="genJavaCode">
          <v-gen-java-code :id.sync="id" ></v-gen-java-code>
        </el-tab-pane>
        <el-tab-pane label="生成Sql代码" name="genSqlCode">
          <v-gen-sql-code :id.sync="id" ></v-gen-sql-code>
        </el-tab-pane>
        <el-tab-pane label="生成Vue代码" name="genVueCode">
          <v-gen-vue-code :id.sync="id" ></v-gen-vue-code>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import fieldList from './field-list.vue'
import genJavaCode from './gen-java-code.vue'
import genSqlCode from './gen-sql-code.vue'
import genVueCode from './gen-vue-code.vue'

export default {
  name: 'curd-entity-edit',
  components: {
    'v-field-list': fieldList,
    'v-gen-java-code': genJavaCode,
    'v-gen-sql-code': genSqlCode,
    'v-gen-vue-code': genVueCode
  },
  props: {
    id: {
      type: Number
    }
  },
  data () {
    return {
      menuForm: {
      },
      activeName: 'tableField',
      randomKey: 0
    }
  },
  mounted () {
    this.getById()
  },
  methods: {
    onUpdate () {
      var param = this.menuForm
      api.sysCurd.sysEntityUpdateById(param).then(res => {
        this.$message({ type: 'info', message: '已更新' })
        this.onClose()
        this.$emit('refresh')
      })
    },
    getById () {
      if (this.id === 0 || !this.id) {
        return
      }
      var param = { id: this.id }
      api.sysCurd.sysEntityFindById(param).then(res => {
        this.menuForm = res
      })
    },
    onClose () {
      this.$emit('closeDrawer')
    }
  }
}
</script>

<style lang="scss">
  .form {
    padding: 10px;
  }
</style>
